<template>
  <div class="FirstGrade">
    <van-tabs
      v-model="activeName"
      sticky
      background="#fbfbfb"
      color="#28354a"
      border
      @click="GetListContent"
    >
      <!-- 一级导航 -->
      <van-tab
        v-for="(list, index) in listArr"
        :title="list.name"
        :key="index"
        :name="list.class_id"
        sticky
      >
        <!-- 二级导航 -->
        <van-tabs
          sticky
          v-if="list.sub_classes.length"
          type="line"
          :ellipsis="false"
          background="#fbfbfb"
          color="#cab783"
          title-active-color="#cab783"
          @click="GetItemContent"
          border
          :swipeable="true"
        >
          <van-tab
            v-for="(item, index) in list.sub_classes"
            :key="index"
            :title="item.name"
            :name="item.class_id"
          >
          </van-tab>
        </van-tabs>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { HomeClass, ClassTowGrade } from "@/api/request";

export default {
  nameL: "FirstGrade",
  data() {
    return {
      activeName: "",
      //   classId: 0,
      // 分类数据
      listArr: [],
      //一级请求数据数组
      OneClassArr: [],
    };
  },
  activated() {
    // 进来跳转到指定标签
    // console.log("路由激活", this.$route.query);
    this.activeName = this.$route.query.name;

    //请求分类数据
    HomeClass().then(({ data }) => {
      this.listArr = data.data;
    });

    // 路由激活时调用
    this.GetItemContent();
  },

  mounted() {
    this.$nextTick(() => {
      this.GetListContent();
    });
  },

  methods: {
    //二级导航 导航栏点击请求数据然后渲染
    GetItemContent(name) {
      // ?class_id=15&sort=1&page=1&is_purchase=0
      ClassTowGrade({
        class_id: name,
        sort: 1,
        is_purchase: 0,
      }).then(({ data }) => {
        this.OneClassArr = data.data;
        this.$bus.$emit("Classitem", this.activeName, this.OneClassArr);
        // console.log("二级路由", this.OneClassArr);
      });
    },
    // 一级导航
    GetListContent(name) {
      // ?class_id=15&sort=1&page=1&is_purchase=0
      ClassTowGrade({
        class_id: name,
        sort: 1,
        is_purchase: 0,
      }).then(({ data }) => {
        this.OneClassArr = data.data;
        this.$bus.$emit("Classitem", this.activeName, this.OneClassArr);
        // console.log("一级路由", this.OneClassArr);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.FirstGrade {
}
</style>